<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <title>社交网站底部弹出全屏选择用户</title>
  <!-- Bootstrap 5 CSS -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
  <!-- Font Awesome -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css">
  
  <style>
    :root {
      --primary: #007bff;
      --secondary: #6c757d;
      --light: #f8f9fa;
      --dark: #343a40;
      --white: #ffffff;
      --shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
      --border: #eee;
      
      /* 主题色 */
      --theme1: #1877F2; /* 社交蓝 */
      --theme2: #E4405F; /* 活力粉 */
      --theme3: #00C853; /* 清新绿 */
      --theme4: #212529; /* 商务黑 */
      --theme5: #FF9800; /* 温暖橙 */
      --theme6: #9C27B0; /* 个性紫 */
    }
    
    body {
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      background-color: #f5f5f5;
      color: var(--dark);
      min-height: 100vh;
      padding: 0;
      margin: 0;
      position: relative;
    }
    
    .container {
      max-width: 420px;
      margin: 0 auto;
      background-color: var(--white);
      min-height: 100vh;
      box-shadow: var(--shadow);
      overflow: hidden;
      position: relative;
    }
    
    /* 示例内容区 */
    .demo-content {
      padding: 20px;
    }
    
    .page-title {
      font-size: 20px;
      font-weight: 600;
      margin-bottom: 20px;
    }
    
    .action-card {
      background-color: white;
      border-radius: 12px;
      padding: 20px;
      box-shadow: var(--shadow);
      text-align: center;
      margin-bottom: 20px;
    }
    
    .action-icon {
      font-size: 40px;
      color: var(--primary);
      margin-bottom: 15px;
    }
    
    .action-title {
      font-size: 18px;
      font-weight: 600;
      margin-bottom: 10px;
    }
    
    .action-desc {
      color: #666;
      font-size: 14px;
      margin-bottom: 20px;
    }
    
    .open-btn {
      background-color: var(--primary);
      color: white;
      border: none;
      border-radius: 8px;
      padding: 10px 20px;
      font-weight: 500;
      cursor: pointer;
      transition: all 0.2s;
    }
    
    .open-btn:hover {
      opacity: 0.9;
      transform: translateY(-2px);
    }
    
    /* 选择用户弹窗 */
    .user-select-modal {
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      background-color: var(--white);
      z-index: 1050;
      transform: translateY(100%);
      transition: transform 0.3s ease;
      max-width: 420px;
      margin: 0 auto;
      height: 90vh;
      border-radius: 20px 20px 0 0;
      display: flex;
      flex-direction: column;
    }
    
    .user-select-modal.active {
      transform: translateY(0);
    }
    
    .modal-overlay {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background-color: rgba(0, 0, 0, 0.5);
      z-index: 1040;
      opacity: 0;
      visibility: hidden;
      transition: all 0.3s ease;
    }
    
    .modal-overlay.active {
      opacity: 1;
      visibility: visible;
    }
    
    /* 弹窗头部 */
    .modal-header {
      padding: 16px 20px;
      border-bottom: 1px solid var(--border);
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    
    .modal-title {
      font-size: 18px;
      font-weight: 600;
      margin: 0;
    }
    
    .modal-actions {
      display: flex;
      gap: 10px;
    }
    
    .modal-btn {
      padding: 6px 14px;
      border-radius: 6px;
      font-size: 14px;
      font-weight: 500;
      cursor: pointer;
      border: none;
    }
    
    .cancel-btn {
      background-color: transparent;
      color: #666;
    }
    
    .confirm-btn {
      background-color: var(--primary);
      color: white;
    }
    
    /* 搜索区域 */
    .search-container {
      padding: 15px 20px;
      border-bottom: 1px solid var(--border);
    }
    
    .search-input {
      width: 100%;
      padding: 12px 15px;
      border-radius: 8px;
      border: 1px solid var(--border);
      font-size: 15px;
      background-color: #f5f5f5;
      outline: none;
      transition: all 0.2s;
    }
    
    .search-input:focus {
      border-color: var(--primary);
      background-color: white;
    }
    
    /* 联系人列表 */
    .user-list-container {
      flex: 1;
      overflow-y: auto;
    }
    
    .list-section {
      margin-bottom: 15px;
    }
    
    .section-header {
      padding: 10px 20px;
      font-size: 12px;
      font-weight: 600;
      color: #666;
      background-color: #f5f5f5;
    }
    
    .user-item {
      padding: 12px 20px;
      display: flex;
      align-items: center;
      gap: 15px;
      cursor: pointer;
      transition: background-color 0.2s;
      border-bottom: 1px solid var(--border);
    }
    
    .user-item:hover {
      background-color: #f9f9f9;
    }
    
    .user-avatar {
      width: 48px;
      height: 48px;
      border-radius: 50%;
      overflow: hidden;
      position: relative;
    }
    
    .user-avatar img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
    
    .user-info {
      flex: 1;
      min-width: 0;
    }
    
    .user-name {
      font-weight: 500;
      font-size: 16px;
      margin-bottom: 2px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    
    .user-desc {
      font-size: 12px;
      color: #666;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    
    .user-check {
      width: 24px;
      height: 24px;
      border-radius: 50%;
      border: 2px solid #ccc;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 0.2s;
    }
    
    .user-item.selected .user-check {
      background-color: var(--primary);
      border-color: var(--primary);
      color: white;
    }
    
    /* 样式切换器 */
    .style-switcher {
      position: fixed;
      top: 20px;
      right: 20px;
      z-index: 1000;
      background-color: white;
      border-radius: 8px;
      box-shadow: var(--shadow);
      overflow: hidden;
      width: 180px;
    }
    
    .switcher-header {
      padding: 10px 16px;
      font-size: 14px;
      font-weight: 600;
      border-bottom: 1px solid #eee;
    }
    
    .switcher-option {
      padding: 12px 16px;
      font-size: 14px;
      cursor: pointer;
    }
    
    .switcher-option:hover {
      background-color: #f9f9f9;
    }
    
    .switcher-option.active {
      background-color: var(--primary);
      color: white;
    }
    
    /* 主题样式 */
    .theme1 { --primary: var(--theme1); }
    .theme2 { --primary: var(--theme2); }
    .theme3 { --primary: var(--theme3); }
    .theme4 { --primary: var(--theme4); }
    .theme5 { --primary: var(--theme5); }
    .theme6 { --primary: var(--theme6); }
    
    /* 主题1：社交蓝 */
    .theme1 .user-select-modal {
      background-color: #f9fafd;
    }
    
    .theme1 .section-header {
      background-color: #edf2fa;
    }
    
    /* 主题2：活力粉 */
    .theme2 .user-select-modal {
      background-color: #fff5f8;
    }
    
    .theme2 .section-header {
      background-color: #ffe6ec;
    }
    
    /* 主题3：清新绿 */
    .theme3 .user-select-modal {
      background-color: #f0fff4;
    }
    
    .theme3 .section-header {
      background-color: #e6f7ee;
    }
    
    /* 主题4：商务黑 */
    .theme4 {
      --border: #333;
      --dark: white;
    }
    
    .theme4 .user-select-modal,
    .theme4 .search-input,
    .theme4 .user-item:hover {
      background-color: #121212;
    }
    
    .theme4 .section-header {
      background-color: #1e1e1e;
      color: #aaa;
    }
    
    .theme4 .user-name,
    .theme4 .modal-title {
      color: white;
    }
    
    .theme4 .user-desc,
    .theme4 .cancel-btn {
      color: #aaa;
    }
    
    .theme4 .search-input {
      background-color: #1e1e1e;
      border-color: #333;
      color: white;
    }
    
    /* 主题5：温暖橙 */
    .theme5 .user-select-modal {
      background-color: #fff8e6;
    }
    
    .theme5 .section-header {
      background-color: #fff2cc;
    }
    
    /* 主题6：个性紫 */
    .theme6 .user-select-modal {
      background-color: #f3e5f5;
    }
    
    .theme6 .section-header {
      background-color: #e1bee7;
    }
    
    /* 动画 */
    @keyframes fadeIn {
      from { opacity: 0; }
      to { opacity: 1; }
    }
    
    .selected-animation {
      animation: fadeIn 0.3s;
    }
    
    /* 响应式 */
    @media (max-width: 360px) {
      .user-avatar {
        width: 42px;
        height: 42px;
      }
      
      .user-name {
        font-size: 15px;
      }
    }
  </style>
</head>
<body>
  <!-- 样式切换器 -->
  <div class="style-switcher">
    <div class="switcher-header">选择用户样式</div>
    <div class="switcher-option active" data-style="1">社交蓝</div>
    <div class="switcher-option" data-style="2">活力粉</div>
    <div class="switcher-option" data-style="3">清新绿</div>
    <div class="switcher-option" data-style="4">商务黑</div>
    <div class="switcher-option" data-style="5">温暖橙</div>
    <div class="switcher-option" data-style="6">个性紫</div>
  </div>
  
  <div class="container">
    <div class="demo-content">
      <h2 class="page-title">选择用户示例</h2>
      
      <div class="action-card">
        <div class="action-icon">
          <i class="fa fa-users"></i>
        </div>
        <h3 class="action-title">邀请好友</h3>
        <p class="action-desc">从联系人中选择好友，邀请他们加入群组</p>
        <button class="open-btn" data-target="select1">选择好友</button>
      </div>
      
      <div class="action-card">
        <div class="action-icon">
          <i class="fa fa-share-alt"></i>
        </div>
        <h3 class="action-title">分享给联系人</h3>
        <p class="action-desc">选择联系人，将内容分享给他们</p>
        <button class="open-btn" data-target="select2">选择联系人</button>
      </div>
      
      <div class="action-card">
        <div class="action-icon">
          <i class="fa fa-gift"></i>
        </div>
        <h3 class="action-title">发送红包</h3>
        <p class="action-desc">选择要发送红包的好友</p>
        <button class="open-btn" data-target="select3">选择用户</button>
      </div>
    </div>
    
    <!-- 选择用户弹窗1 - 社交蓝 -->
    <div class="user-select-modal theme1" id="select1">
      <div class="modal-header">
        <h3 class="modal-title">选择好友（0/10）</h3>
        <div class="modal-actions">
          <button class="modal-btn cancel-btn">取消</button>
          <button class="modal-btn confirm-btn">确定</button>
        </div>
      </div>
      
      <div class="search-container">
        <input type="text" class="search-input" placeholder="搜索好友...">
      </div>
      
      <div class="user-list-container">
        <div class="list-section">
          <div class="section-header">常用联系人</div>
          <div class="user-item">
            <div class="user-avatar">
              <img src="https://picsum.photos/id/64/200" alt="用户头像">
            </div>
            <div class="user-info">
              <div class="user-name">张三</div>
              <div class="user-desc">好友 · 经常联系</div>
            </div>
            <div class="user-check">
              <i class="fa fa-check fa-xs"></i>
            </div>
          </div>
          <div class="user-item">
            <div class="user-avatar">
              <img src="https://picsum.photos/id/65/200" alt="用户头像">
            </div>
            <div class="user-info">
              <div class="user-name">李四</div>
              <div class="user-desc">同事 · 昨天联系</div>
            </div>
            <div class="user-check">
              <i class="fa fa-check fa-xs"></i>
            </div>
          </div>
          <div class="user-item">
            <div class="user-avatar">
              <img src="https://picsum.photos/id/66/200" alt="用户头像">
            </div>
            <div class="user-info">
              <div class="user-name">王五</div>
              <div class="user-desc">大学同学</div>
            </div>
            <div class="user-check">
              <i class="fa fa-check fa-xs"></i>
            </div>
          </div>
        </div>
        
        <div class="list-section">
          <div class="section-header">A</div>
          <div class="user-item">
            <div class="user-avatar">
              <img src="https://picsum.photos/id/91/200" alt="用户头像">
            </div>
            <div class="user-info">
              <div class="user-name">阿强</div>
              <div class="user-desc">高中同学</div>
            </div>
            <div class="user-check">
              <i class="fa fa-check fa-xs"></i>
            </div>
          </div>
          <div class="user-item">
            <div class="user-avatar">
              <img src="https://picsum.photos/id/92/200" alt="用户头像">
            </div>
            <div class="user-info">
              <div class="user-name">阿娇</div>
              <div class="user-desc">邻居</div>
            </div>
            <div class="user-check">
              <i class="fa fa-check fa-xs"></i>
            </div>
          </div>
        </div>
        
        <div class="list-section">
          <div class="section-header">B</div>
          <div class="user-item">
            <div class="user-avatar">
              <img src="https://picsum.photos/id/93/200" alt="用户头像">
            </div>
            <div class="user-info">
              <div class="user-name">冰冰</div>
              <div class="user-desc">同事</div>
            </div>
            <div class="user-check">
              <i class="fa fa-check fa-xs"></i>
            </div>
          </div>
        </div>
      </div>
    </div>
    
    <!-- 选择用户弹窗2 - 活力粉 -->
    <div class="user-select-modal theme2" id="select2">
      <div class="modal-header">
        <h3 class="modal-title">选择联系人</h3>
        <div class="modal-actions">
          <button class="modal-btn cancel-btn">取消</button>
          <button class="modal-btn confirm-btn">分享</button>
        </div>
      </div>
      
      <div class="search-container">
        <input type="text" class="search-input" placeholder="搜索联系人...">
      </div>
      
      <div class="user-list-container">
        <div class="list-section">
          <div class="section-header">最近联系</div>
          <div class="user-item">
            <div class="user-avatar">
              <img src="https://picsum.photos/id/22/200" alt="用户头像">
            </div>
            <div class="user-info">
              <div class="user-name">赵六</div>
              <div class="user-desc">10分钟前</div>
            </div>
            <div class="user-check">
              <i class="fa fa-check fa-xs"></i>
            </div>
          </div>
          <div class="user-item">
            <div class="user-avatar">
              <img src="https://picsum.photos/id/23/200" alt="用户头像">
            </div>
            <div class="user-info">
              <div class="user-name">孙七</div>
              <div class="user-desc">1小时前</div>
            </div>
            <div class="user-check">
              <i class="fa fa-check fa-xs"></i>
            </div>
          </div>
        </div>
        
        <div class="list-section">
          <div class="section-header">群组</div>
          <div class="user-item">
            <div class="user-avatar">
              <img src="https://picsum.photos/id/24/200" alt="群组头像">
            </div>
            <div class="user-info">
              <div class="user-name">大学同学群</div>
              <div class="user-desc">42名成员</div>
            </div>
            <div class="user-check">
              <i class="fa fa-check fa-xs"></i>
            </div>
          </div>
          <div class="user-item">
            <div class="user-avatar">
              <img src="https://picsum.photos/id/25/200" alt="群组头像">
            </div>
            <div class="user-info">
              <div class="user-name">公司项目组</div>
              <div class="user-desc">12名成员</div>
            </div>
            <div class="user-check">
              <i class="fa fa-check fa-xs"></i>
            </div>
          </div>
        </div>
        
        <div class="list-section">
          <div class="section-header">好友</div>
          <div class="user-item">
            <div class="user-avatar">
              <img src="https://picsum.photos/id/26/200" alt="用户头像">
            </div>
            <div class="user-info">
              <div class="user-name">周八</div>
              <div class="user-desc">好友</div>
            </div>
            <div class="user-check">
              <i class="fa fa-check fa-xs"></i>
            </div>
          </div>
          <div class="user-item">
            <div class="user-avatar">
              <img src="https://picsum.photos/id/27/200" alt="用户头像">
            </div>
            <div class="user-info">
              <div class="user-name">吴九</div>
              <div class="user-desc">好友</div>
            </div>
            <div class="user-check">
              <i class="fa fa-check fa-xs"></i>
            </div>
          </div>
        </div>
      </div>
    </div>
    
    <!-- 选择用户弹窗3 - 清新绿 -->
    <div class="user-select-modal theme3" id="select3">
      <div class="modal-header">
        <h3 class="modal-title">选择用户</h3>
        <div class="modal-actions">
          <button class="modal-btn cancel-btn">取消</button>
          <button class="modal-btn confirm-btn">发送</button>
        </div>
      </div>
      
      <div class="search-container">
        <input type="text" class="search-input" placeholder="搜索用户...">
      </div>
      
      <div class="user-list-container">
        <div class="list-section">
          <div class="section-header">家人</div>
          <div class="user-item">
            <div class="user-avatar">
              <img src="https://picsum.photos/id/64/200" alt="用户头像">
            </div>
            <div class="user-info">
              <div class="user-name">爸爸</div>
              <div class="user-desc">家人</div>
            </div>
            <div class="user-check">
              <i class="fa fa-check fa-xs"></i>
            </div>
          </div>
          <div class="user-item">
            <div class="user-avatar">
              <img src="https://picsum.photos/id/65/200" alt="用户头像">
            </div>
            <div class="user-info">
              <div class="user-name">妈妈</div>
              <div class="user-desc">家人</div>
            </div>
            <div class="user-check">
              <i class="fa fa-check fa-xs"></i>
            </div>
          </div>
        </div>
        
        <div class="list-section">
          <div class="section-header">好友</div>
          <div class="user-item">
            <div class="user-avatar">
              <img src="https://picsum.photos/id/66/200" alt="用户头像">
            </div>
            <div class="user-info">
              <div class="user-name">张三</div>
              <div class="user-desc">最好的朋友</div>
            </div>
            <div class="user-check">
              <i class="fa fa-check fa-xs"></i>
            </div>
          </div>
          <div class="user-item">
            <div class="user-avatar">
              <img src="https://picsum.photos/id/67/200" alt="用户头像">
            </div>
            <div class="user-info">
              <div class="user-name">李四</div>
              <div class="user-desc">好友</div>
            </div>
            <div class="user-check">
              <i class="fa fa-check fa-xs"></i>
            </div>
          </div>
          <div class="user-item">
            <div class="user-avatar">
              <img src="https://picsum.photos/id/68/200" alt="用户头像">
            </div>
            <div class="user-info">
              <div class="user-name">王五</div>
              <div class="user-desc">好友</div>
            </div>
            <div class="user-check">
              <i class="fa fa-check fa-xs"></i>
            </div>
          </div>
        </div>
      </div>
    </div>
    
    <!-- 选择用户弹窗4 - 商务黑 -->
    <div class="user-select-modal theme4" id="select4">
      <div class="modal-header">
        <h3 class="modal-title">选择同事</h3>
        <div class="modal-actions">
          <button class="modal-btn cancel-btn">取消</button>
          <button class="modal-btn confirm-btn">邀请</button>
        </div>
      </div>
      
      <div class="search-container">
        <input type="text" class="search-input" placeholder="搜索同事...">
      </div>
      
      <div class="user-list-container">
        <div class="list-section">
          <div class="section-header">部门领导</div>
          <div class="user-item">
            <div class="user-avatar">
              <img src="https://picsum.photos/id/177/200" alt="用户头像">
            </div>
            <div class="user-info">
              <div class="user-name">张经理</div>
              <div class="user-desc">产品部经理</div>
            </div>
            <div class="user-check">
              <i class="fa fa-check fa-xs"></i>
            </div>
          </div>
          <div class="user-item">
            <div class="user-avatar">
              <img src="https://picsum.photos/id/178/200" alt="用户头像">
            </div>
            <div class="user-info">
              <div class="user-name">李总监</div>
              <div class="user-desc">技术总监</div>
            </div>
            <div class="user-check">
              <i class="fa fa-check fa-xs"></i>
            </div>
          </div>
        </div>
        
        <div class="list-section">
          <div class="section-header">技术部</div>
          <div class="user-item">
            <div class="user-avatar">
              <img src="https://picsum.photos/id/179/200" alt="用户头像">
            </div>
            <div class="user-info">
              <div class="user-name">王工程师</div>
              <div class="user-desc">前端开发</div>
            </div>
            <div class="user-check">
              <i class="fa fa-check fa-xs"></i>
            </div>
          </div>
          <div class="user-item">
            <div class="user-avatar">
              <img src="https://picsum.photos/id/180/200" alt="用户头像">
            </div>
            <div class="user-info">
              <div class="user-name">赵开发</div>
              <div class="user-desc">后端开发</div>
            </div>
            <div class="user-check">
              <i class="fa fa-check fa-xs"></i>
            </div>
          </div>
        </div>
      </div>
    </div>
    
    <!-- 选择用户弹窗5 - 温暖橙 -->
    <div class="user-select-modal theme5" id="select5">
      <div class="modal-header">
        <h3 class="modal-title">选择活动参与者</h3>
        <div class="modal-actions">
          <button class="modal-btn cancel-btn">取消</button>
          <button class="modal-btn confirm-btn">确定</button>
        </div>
      </div>
      
      <div class="search-container">
        <input type="text" class="search-input" placeholder="搜索参与者...">
      </div>
      
      <div class="user-list-container">
        <div class="list-section">
          <div class="section-header">已确认</div>
          <div class="user-item selected">
            <div class="user-avatar">
              <img src="https://picsum.photos/id/342/200" alt="用户头像">
            </div>
            <div class="user-info">
              <div class="user-name">小明</div>
              <div class="user-desc">已确认参加</div>
            </div>
            <div class="user-check">
              <i class="fa fa-check fa-xs"></i>
            </div>
          </div>
          <div class="user-item selected">
            <div class="user-avatar">
              <img src="https://picsum.photos/id/343/200" alt="用户头像">
            </div>
            <div class="user-info">
              <div class="user-name">小红</div>
              <div class="user-desc">已确认参加</div>
            </div>
            <div class="user-check">
              <i class="fa fa-check fa-xs"></i>
            </div>
          </div>
        </div>
        
        <div class="list-section">
          <div class="section-header">待邀请</div>
          <div class="user-item">
            <div class="user-avatar">
              <img src="https://picsum.photos/id/344/200" alt="用户头像">
            </div>
            <div class="user-info">
              <div class="user-name">小刚</div>
              <div class="user-desc">好友</div>
            </div>
            <div class="user-check">
              <i class="fa fa-check fa-xs"></i>
            </div>
          </div>
          <div class="user-item">
            <div class="user-avatar">
              <img src="https://picsum.photos/id/345/200" alt="用户头像">
            </div>
            <div class="user-info">
              <div class="user-name">小丽</div>
              <div class="user-desc">好友</div>
            </div>
            <div class="user-check">
              <i class="fa fa-check fa-xs"></i>
            </div>
          </div>
        </div>
      </div>
    </div>
    
    <!-- 选择用户弹窗6 - 个性紫 -->
    <div class="user-select-modal theme6" id="select6">
      <div class="modal-header">
        <h3 class="modal-title">选择关注者</h3>
        <div class="modal-actions">
          <button class="modal-btn cancel-btn">取消</button>
          <button class="modal-btn confirm-btn">发送消息</button>
        </div>
      </div>
      
      <div class="search-container">
        <input type="text" class="search-input" placeholder="搜索关注者...">
      </div>
      
      <div class="user-list-container">
        <div class="list-section">
          <div class="section-header">活跃关注者</div>
          <div class="user-item">
            <div class="user-avatar">
              <img src="https://picsum.photos/id/342/200" alt="用户头像">
            </div>
            <div class="user-info">
              <div class="user-name">创意达人</div>
              <div class="user-desc">3小时前互动过</div>
            </div>
            <div class="user-check">
              <i class="fa fa-check fa-xs"></i>
            </div>
          </div>
          <div class="user-item">
            <div class="user-avatar">
              <img src="https://picsum.photos/id/343/200" alt="用户头像">
            </div>
            <div class="user-info">
              <div class="user-name">摄影爱好者</div>
              <div class="user-desc">昨天互动过</div>
            </div>
            <div class="user-check">
              <i class="fa fa-check fa-xs"></i>
            </div>
          </div>
        </div>
        
        <div class="list-section">
          <div class="section-header">新关注者</div>
          <div class="user-item">
            <div class="user-avatar">
              <img src="https://picsum.photos/id/344/200" alt="用户头像">
            </div>
            <div class="user-info">
              <div class="user-name">旅行日记</div>
              <div class="user-desc">2天前关注</div>
            </div>
            <div class="user-check">
              <i class="fa fa-check fa-xs"></i>
            </div>
          </div>
          <div class="user-item">
            <div class="user-avatar">
              <img src="https://picsum.photos/id/345/200" alt="用户头像">
            </div>
            <div class="user-info">
              <div class="user-name">美食博主</div>
              <div class="user-desc">3天前关注</div>
            </div>
            <div class="user-check">
              <i class="fa fa-check fa-xs"></i>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  
  <!-- 遮罩层 -->
  <div class="modal-overlay"></div>
  
  <!-- Bootstrap JS -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
  
  <script>
    // 当前状态
    let currentStyle = '1';
    let activeModal = null;
    
    // DOM元素
    const switcherOptions = document.querySelectorAll('.switcher-option');
    const userSelectModals = {
      '1': document.getElementById('select1'),
      '2': document.getElementById('select2'),
      '3': document.getElementById('select3'),
      '4': document.getElementById('select4'),
      '5': document.getElementById('select5'),
      '6': document.getElementById('select6')
    };
    const modalOverlay = document.querySelector('.modal-overlay');
    const openButtons = document.querySelectorAll('.open-btn');
    const cancelButtons = document.querySelectorAll('.cancel-btn');
    const confirmButtons = document.querySelectorAll('.confirm-btn');
    const userItems = document.querySelectorAll('.user-item');
    
    // 初始化
    function init() {
      // 样式切换事件
      switcherOptions.forEach(option => {
        option.addEventListener('click', function() {
          const style = this.getAttribute('data-style');
          switchStyle(style);
        });
      });
      
      // 打开弹窗
      openButtons.forEach(btn => {
        btn.addEventListener('click', function() {
          const target = this.getAttribute('data-target');
          // 根据当前样式选择对应的弹窗
          const modalId = `select${currentStyle}`;
          openModal(document.getElementById(modalId) || document.getElementById(target));
        });
      });
      
      // 取消按钮
      cancelButtons.forEach(btn => {
        btn.addEventListener('click', closeModal);
      });
      
      // 确认按钮
      confirmButtons.forEach(btn => {
        btn.addEventListener('click', function() {
          const modal = this.closest('.user-select-modal');
          const selectedCount = modal.querySelectorAll('.user-item.selected').length;
          const actionText = this.textContent;
          
          if (selectedCount > 0) {
            alert(`已${actionText}给${selectedCount}位用户`);
            closeModal();
          } else {
            alert('请至少选择一位用户');
          }
        });
      });
      
      // 点击遮罩层关闭
      modalOverlay.addEventListener('click', closeModal);
      
      // 用户选择
      userItems.forEach(item => {
        item.addEventListener('click', function(e) {
          // 避免点击复选框时触发两次
          if (!e.target.closest('.user-check')) {
            toggleUserSelection(this);
          }
        });
        
        // 复选框点击
        const checkBox = item.querySelector('.user-check');
        checkBox.addEventListener('click', function(e) {
          e.stopPropagation();
          toggleUserSelection(item);
        });
      });
    }
    
    // 切换样式
    function switchStyle(style) {
      // 更新当前样式
      currentStyle = style;
      
      // 更新切换器选中状态
      switcherOptions.forEach(option => {
        option.classList.remove('active');
        if (option.getAttribute('data-style') === style) {
          option.classList.add('active');
        }
      });
      
      // 如果有打开的弹窗，更新弹窗样式
      if (activeModal) {
        const newModalId = `select${style}`;
        const newModal = document.getElementById(newModalId);
        if (newModal) {
          closeModal();
          setTimeout(() => openModal(newModal), 300);
        }
      }
    }
    
    // 打开弹窗
    function openModal(modal) {
      if (!modal) return;
      
      activeModal = modal;
      modal.classList.add('active');
      modalOverlay.classList.add('active');
      
      // 更新标题中的选中数量
      updateSelectedCount(modal);
    }
    
    // 关闭弹窗
    function closeModal() {
      if (activeModal) {
        activeModal.classList.remove('active');
        activeModal = null;
      }
      modalOverlay.classList.remove('active');
    }
    
    // 切换用户选择状态
    function toggleUserSelection(item) {
      item.classList.toggle('selected');
      
      // 添加选中动画
      const checkBox = item.querySelector('.user-check');
      checkBox.classList.add('selected-animation');
      setTimeout(() => checkBox.classList.remove('selected-animation'), 300);
      
      // 更新计数
      updateSelectedCount(item.closest('.user-select-modal'));
    }
    
    // 更新选中数量
    function updateSelectedCount(modal) {
      const titleElement = modal.querySelector('.modal-title');
      if (!titleElement) return;
      
      const selectedCount = modal.querySelectorAll('.user-item.selected').length;
      
      // 如果标题包含数字计数格式，则更新
      if (titleElement.textContent.includes('(')) {
        titleElement.textContent = titleElement.textContent.replace(/\(\d+\/\d+\)/, `(${selectedCount}/10)`);
      }
    }
    
    // 启动
    init();
  </script>
</body>
</html>

